<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('班组生产数据列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>开始时间：</label>
                            <input type="text" class="time-input" placeholder="请选择开始时间" id="searchStartTimeId" name="searchStartTime"/>
                        </li>
                        <li>
                            <label>结束时间：</label>
                            <input type="text" class="time-input" placeholder="请选择结束时间" id="searchEndTimeId" name="searchEndTime"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="post4Analysis(document.getElementById('searchStartTimeId').value, document.getElementById('searchEndTimeId').value)"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12" style="margin-top: 15px; background-color: #ffffff; border-radius: 6px; box-shadow: 1px 1px 3px #00000033">
            <div class="wrapper wrapper-content animated fadeInRight" style="padding: 0">
                <!--    第一行：两个图-->
                <div class="row">
<!--                    <div class="col-sm-6">-->
<!--                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">-->
<!--                            <div class="ibox-title">-->
<!--                                <h5>结果排名：<br/>-->
<!--                                    <strong><font color="red">班组三</font>、班组二、班组四、班组七、班组一、班组五、班组六</strong>-->
<!--                                </h5>-->
<!--                            </div>-->
<!--                            <div class="ibox-content">-->
<!--                                <div class="echarts" id="echarts-line-chart-1"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>结果排名：<br/>
                                    <strong><font color="red">关羽</font>、典韦、刘备、张飞、曹操、诸葛亮、马超</strong>
                                </h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-line-chart-2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>结果排名：<br/>
                                    <strong><font color="red">典韦</font>、关羽、刘备、张飞、曹操、诸葛亮、马超</strong>
                                </h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-bar-chart-1"></div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>结果排名：<br/>
                                    <strong><font color="red">曹操</font>、关羽、典韦、张飞、刘备、诸葛亮、马超</strong>
                                </h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-pie-chart-3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>结果排名：<br/>
                                    <strong><font color="red">刘备</font>、关羽、典韦、张飞、曹操、诸葛亮、马超</strong>
                                </h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-pie-chart-1"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--    第二行：两个图-->
                <div class="row">

                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>结果排名：<br/>
                                    <strong><font color="red">马超</font>、关羽、典韦、张飞、曹操、诸葛亮、刘备</strong>
                                </h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-pie-chart-2"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
let prefix = ctx + "analysis/team";

function lineChart(lineData, id) {
    var lineChart = echarts.init(document.getElementById(id));
    var lineoption = {
        title : {
            text: lineData.titleText
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data: lineData.legend
        },
        grid:{
            x:40,
            x2:40,
            y2:24
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : lineData.xaxis
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value}'
                }
            }
        ],
        series : [
            {
                name: lineData.series1Name,
                type:'line',
                data: lineData.series1Data,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: lineData.series2Name,
                type:'line',
                data: lineData.series2Data,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    lineChart.setOption(lineoption);
    $(window).resize(lineChart.resize);
}

function pieChart(pieData, id) {
    var pieChart = echarts.init(document.getElementById(id));
    var pieoption = {
        title : {
            text: pieData.titleText,
            subtext: pieData.titleSubText,
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data: pieData.legend
        },
        calculable : true,
        series : [
            {
                name: pieData.seriesName,
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data: pieData.seriesData
            }
        ]
    };
    pieChart.setOption(pieoption);
    $(window).resize(pieChart.resize);
}

function barChart(barData, id) {
    var barChart = echarts.init(document.getElementById(id));
    var baroption = {
        title : {
            text: barData.titleText
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data: barData.legend
        },
        grid:{
            x:30,
            x2:40,
            y2:24
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : barData.xaxis
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name: barData.series1Name,
                type:'bar',
                data: barData.series1Data,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: barData.series2Name,
                type:'bar',
                data: barData.series2Data,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    barChart.setOption(baroption);
    window.onresize = barChart.resize;
}

function post4Analysis(startTime, endTime) {
    $.post(prefix + "/analysis/list", {searchStartTime: startTime, searchEndTime: endTime}, function(result) {
        console.log(result);
        if (result.code == web_status.SUCCESS) {
            $.modal.msgSuccess("请求成功");
            // lineChart(result.data.deviceRate, "echarts-line-chart-1");
            lineChart(result.data.workRate, "echarts-line-chart-2");
            pieChart(result.data.weldingUse, "echarts-pie-chart-1");
            pieChart(result.data.electUse, "echarts-pie-chart-2");
            pieChart(result.data.gasUse, "echarts-pie-chart-3");
            barChart(result.data.weldTimeAndNum, "echarts-bar-chart-1");

        } else {
            $.modal.msgError(result.msg);
        }
    });
}

function formatDate(date, format) {
    const map = {
        mm: date.getMonth() + 1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1,
        dd: date.getDate() < 10 ? '0'+date.getDate() : date.getDate(),
        yy: date.getFullYear().toString().slice(-2),
        yyyy: date.getFullYear()
    };
    return format.replace(/(mm|dd|yyyy|yy)/gi, matched => map[matched])
}

$(function() {
    const today = new Date();
    let startTime = document.getElementById('searchStartTimeId').value = formatDate(today, 'yyyy-mm-dd');
    let endTime = document.getElementById('searchEndTimeId').value = formatDate(today, 'yyyy-mm-dd');
    post4Analysis(startTime, endTime);
});

</script>
</body>
</html>